<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>

<!-- 顶部导航栏 -->
<header class="flex ml-48 bg-white dark:bg-gray-800 shadow dark:border-b dark:border-gray-700">
    <div class="flex items-center justify-between px-6 py-4">
        <div class="flex items-center">
            <!-- 移动端菜单按钮 -->
            <button id="menu-toggle"
                    class="text-gray-500 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-100 focus:outline-none focus:text-gray-600 dark:focus:text-gray-100"
            >
                <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                          d="M4 6h16M4 12h16M4 18h16"></path>
                </svg>
            </button>
            <h2 class="text-xl font-semibold ml-2 lg:ml-0">仪表盘</h2>
        </div>
        <div class="flex items-center">
            <!-- 主题切换 -->
            <div class="flex items-center space-x-4">
                <button id="theme-toggle"
                        class="text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 mr-2"
                >
                    <label class="swap swap-rotate">
                        <input type="checkbox" class="theme-controller" value="dark"/>
                        <svg class="swap-off h-6 w-6 fill-current" xmlns="http://www.w3.org/2000/svg"
                             viewBox="0 0 24 24">
                            <!-- Sun icon paths here -->
                            <path d="M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41ZM12,6.5A5.5,5.5,0,1,0,17.5,12,5.51,5.51,0,0,0,12,6.5Zm0,9A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z"></path>
                        </svg>
                        <svg class="swap-on h-6 w-6 fill-current" xmlns="http://www.w3.org/2000/svg"
                             viewBox="0 0 24 24">
                            <!-- Moon icon paths here -->
                            <path d="M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z"></path>
                        </svg>
                    </label>
                </button>
            </div>
            <div class="flex-none neutral-content mr-4 border rounded-full">
                <div class="dropdown dropdown-end flex justify-between">
                    <div tabindex="0" role="button" class="btn btn-ghost btn-circle avatar">
                        <div class="w-10 rounded-full">
                            <img alt="Tailwind CSS Navbar component"
                                 src="<c:url value="/assets/img/form-logo.jpeg"/>"/>
                        </div>
                    </div>
                    <div tabindex="0" role="button" class="flex mr-2  justify-center items-center">
                        <span class="select-none">管理员</span>
                    </div>
                    <ul tabindex="0"
                        class="menu menu-sm dropdown-content bg-base-100 z-[1] rounded-box mt-14 w-24 p-2 shadow items-center">
                        <li>
                            <a href="javascript:void(0)" data-page="/views/dashboard/child/mainContent.html"
                               class="sk-menu-item">设置</a>
                        </li>
                        <li><a href="${pageContext.request.contextPath}/auth/logout">退出</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</header>